<template>
  <div class="main">
    <header class="header">
      <div class="tianqi">
        <img src="../../assets/dapingImg/2.png" alt="" />
        <span>2020-01-28 星期二 14:50</span>
      </div>
      <div class="title">
        驻马店市基层战备+大安全智慧平台
        <div class="title2">战时应战 急时应急 平时服务”“1+4+8 - 一平台·四级联动·八方协同</div>
      </div>
      <div class="guang"></div>
    </header>
    <a-row class="content">
      <a-col :span="6" class="content_left">
        <div class="left">
          <!-- 数据总览 -->
          <div class="GeneralView">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>数据总览</span>
              <span class="ying">DATA SCREENING</span>
            </div>
            <div class="GeneralView_main">
              <div class="GeneralView_main_top">
                <span class="span1">35</span>
                <span class="span2">万人</span>
                <p class="span3">平台覆盖居民总数</p>
              </div>
              <div class="GeneralView_main_left">
                <span class="span1">1325</span>
                <span class="span2">个</span>
                <p class="span3">监控各类企业</p>
              </div>
              <div class="GeneralView_main_right">
                <span class="span1">60</span>
                <span class="span2">个</span>
                <p class="span3">服务社区</p>
              </div>
            </div>
          </div>
          <!-- 网格人员统计 -->
          <div class="Statistics">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>网格人员统计</span>
              <span class="ying">GRID PERSONNEL STATISTICS</span>
            </div>
            <div class="Statistics_main">
              <div class="Statistics_box">
                <span class="Statistics_box_span1"><img src="../../assets/dapingImg/22.png" alt="" />一级网格人员</span>
                <span class="Statistics_box_span2">86</span>
              </div>
              <div class="Statistics_box">
                <span class="Statistics_box_span1"><img src="../../assets/dapingImg/22.png" alt="" />二级网格人员</span>
                <span class="Statistics_box_span2">86</span>
              </div>
              <div class="Statistics_box">
                <span class="Statistics_box_span1"><img src="../../assets/dapingImg/22.png" alt="" />三级网格人员</span>
                <span class="Statistics_box_span2">86</span>
              </div>
            </div>
          </div>
          <!-- 应急队伍统计 -->
          <div class="team">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>应急队伍统计</span>
              <span class="ying">EMERGENCYTEAM STATISTICS</span>
            </div>
            <div class="team_main">
              <div class="team_main_box">
                <div><img src="../../assets/dapingImg/20.png" alt="" /></div>
                <div class="team_main_box_right">
                  <div class="shuliang">268</div>
                  <div class="name">应急队伍</div>
                </div>
              </div>
              <div class="team_main_box">
                <div><img src="../../assets/dapingImg/21.png" alt="" /></div>
                <div class="team_main_box_right">
                  <div class="shuliang">2820</div>
                  <div class="name">应急队员</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 重点商家信息 -->
          <div class="merchant">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>重点商家信息</span>
              <span class="ying">Key merchant information</span>
            </div>
            <div class="merchant_list">
              <div>民主路印象假日酒店</div>
              <div>民主路印象假日酒店</div>
              <div>民主路印象假日酒店</div>
              <div>民主路印象假日酒店</div>
              <div>民主路印象假日酒店</div>
              <div>民主路印象假日酒店</div>
            </div>
          </div>
        </div>
        <div class="right">
          <!-- 天气预报 -->
          <div class="Weather">
            <div class="Weather_top">
              <div class="Weather_top_left"><img src="../../assets/dapingImg/19.png" alt="" /></div>
              <div class="Weather_top_center">
                <span><img src="../../assets/dapingImg/6.png" alt="" />驻马店市</span>
                <div>25 <span>°C</span></div>
              </div>
              <div class="Weather_top_right">
                <div style="font-size:21px">多云/空气良</div>
                <div style="font-size:12px">28/20°C</div>
              </div>
            </div>
            <div class="Weather_bottom">
              <div class="Weather_bottom_box">
                <div><img src="../../assets/dapingImg/17.png" alt="" /></div>
                <div>
                  <div>明天</div>
                  <div>05/30</div>
                </div>
                <div>空气优</div>
                <div>28/30°C</div>
              </div>
              <div class="Weather_bottom_box">
                <div><img src="../../assets/dapingImg/18.png" alt="" /></div>
                <div>
                  <div>明天</div>
                  <div>05/30</div>
                </div>
                <div>空气优</div>
                <div>28/30°C</div>
              </div>
            </div>
          </div>
          <!-- 消防预警 -->
          <div class="warning">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>消防预警</span>
              <span class="ying">FIRE WARNING</span>
            </div>
            <div class="warning_center">
              <img src="../../assets/dapingImg/1.png" alt="" />
              <div class="warning_center_title">
                <div class="warning_center_title_box1">17</div>
                <div class="warning_center_title_box2">已上报火灾隐患</div>
              </div>
            </div>
            <div class="warning_bottom">某某网吧消防器材缺失</div>
          </div>
          <div class="Risk">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>风险隐患</span>
              <span class="ying">POTENTAL RISK</span>
            </div>
            <div class="Risk_center">
              <div class="Risk_center_title">
                <span>隐患名称</span>
                <span>上报日期</span>
              </div>
              <div class="Risk_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Risk_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Risk_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Risk_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
            </div>
          </div>
          <!-- 视频列表 -->
          <div class="video">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>视频列表</span>
              <span class="ying">video list</span>
            </div>
            <div class="video_list">
              <div>
                <img src="../../assets/dapingImg/banner 2560×1060 1.png" alt="" />
              </div>
              <div>
                <img src="../../assets/dapingImg/banner 2560×1060 1.png" alt="" />
              </div>
              <div>
                <img src="../../assets/dapingImg/banner 2560×1060 1.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <!-- 地图 -->
      <a-col :span="12" class="content_middle">
        <div id="container" class="amap-box">
          <div>
            <img
              @click="changeImage"
              class="iamges"
              style="width: 100%;,height: 1380px;z-index: 2000;"
              :src="imageDetails"
            />
          </div>
        </div>
      </a-col>
      <a-col :span="6" class="content_right">
        <div class="left">
          <div class="Shelter">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>避难场所统计</span>
              <span class="ying">Shelter statistics</span>
            </div>
            <div class="Shelter_center">
              <div id="main"></div>
            </div>
          </div>
          <div class="preparedness">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>战备统计</span>
              <span class="ying">preparedness statistics</span>
            </div>
            <div class="preparedness_center">
              <div id="main2"></div>
            </div>
          </div>
          <div class="Event">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>事件列表</span>
              <span class="ying">Event list</span>
            </div>
            <div class="Event_center">
              <div class="Event_center_title">
                <div>未处理</div>
                <div>进行中</div>
                <div>已完成</div>
              </div>
              <div class="Event_center_list">
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="Disaster">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>灾害预警</span>
              <span class="ying">Disaster early warning</span>
            </div>
            <div class="Disaster_center">
              <div class="Disaster_center_box">
                <img src="../../assets/dapingImg/25.png" alt="" />
                <span>暴雨预警</span>
              </div>
              <div class="Disaster_center_box">
                <img src="../../assets/dapingImg/24.png" alt="" />
                <span>地震预警</span>
              </div>
              <div class="Disaster_center_box">
                <img src="../../assets/dapingImg/26.png" alt="" />
                <span>防空预警</span>
              </div>
              <div class="Disaster_center_box">
                <img src="../../assets/dapingImg/27.png" alt="" />
                <span>火灾预警</span>
              </div>
            </div>
          </div>
          <div class="Stash">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>应急仓库|战备仓库</span>
              <span class="ying">Stash list</span>
            </div>
            <div class="Stash_center">
              <div class="Stash_center_list">
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
                <div>社区居民与物业之间发生纠纷</div>
              </div>
            </div>
          </div>
          <div class="Material">
            <div class="titles">
              <img src="../../assets/dapingImg/13.png" alt="" />
              <span>物资数据</span>
              <span class="ying">Material data</span>
            </div>
            <div class="Material_center">
              <div class="Material_center_title">75 <span>万</span></div>
              <div class="Material_center_titles"><img src="../../assets/dapingImg/14.png" alt="" /></div>
              <div class="Material_center_list">
                <span>隐患名称</span>
                <span>上报日期</span>
              </div>
              <div class="Material_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Material_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Material_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Material_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Material_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Material_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
              <div class="Material_center_box">
                <span>路面积水严重</span>
                <span>20-02-20 12:12:00</span>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import icon from '../../assets/dapingImg/457.png'
import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'
export default {
  data() {
    return {
      bmap: '', //地图
      timer: null,
      url: {},
      currentIndex: 0,
      Lng: '',
      Lat: '',
      location: [114.02, 32.98],
      imageDetails: '',
      imagesData: [
        { url: require('../../assets/a1.png') },
        { url: require('../../assets/a2.png') },
        { url: require('../../assets/a3.png') },
        { url: require('../../assets/a4.png') },
        { url: require('../../assets/a5.png') },
        { url: require('../../assets/a6.png') },
        { url: require('../../assets/a7.png') }
      ]
    }
  },
  mounted() {
    this.initAMap()
    this.echarts()
    this.chart()
    console.log(this.imagesData[0])
    this.imageDetails = this.imagesData[0].url
  },
  created() {},
  destroyed() {},
  methods: {
    changeImage() {
      if (this.currentIndex < 6) {
        this.currentIndex++
        this.imageDetails = this.imagesData[this.currentIndex].url
      } else if(this.currentIndex==6) {
        this.imageDetails = this.imagesData[0].url
        this.currentIndex = 0
      }
      console.log('=====>', this.currentIndex)
    },
    chart() {
      var chartDom = document.getElementById('main2')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['机密', '机密', '机密', '机密', '机密', '机密', '机密'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        series: [
          {
            name: '机密',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '机密',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // 饼图
    echarts() {
      var chartDom = document.getElementById('main')
      console.log(chartDom)
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          left: 'center',
          top: 20,
          textStyle: {
            color: 'red'
          }
        },
        legend: {
          top: 'bottom',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: [20, 80],
            center: ['50%', '50%'],
            data: [
              { value: 335, name: '场所1' },
              { value: 230, name: '场所2' },
              { value: 254, name: '场所3' },
              { value: 235, name: '场所4' },
              { value: 235, name: '场所5' },
              { value: 235, name: '场所6' }
            ].sort(function(a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            label: {
              color: '#fff',
              formatter: '{b|{b}}\n{c|{c}}',
              rich: {
                b: {
                  lineHeight: 30
                  // color: 'red',
                },
                c: {
                  lineHeight: 30
                }
              }
            },
            labelLine: {
              lineStyle: {
                color: '#fff'
              },
              smooth: 0,
              length: 20,
              length2: 30
            },
            itemStyle: {}
          }
        ]
      }
      option && myChart.setOption(option)
    },
    // 地图
    initAMap() {
      // const that = this
      // this.bmap = new AMap.Map('container', {
      //   resizeEnable: true,
      //   mapStyle: 'amap://styles/darkblue',
      //   zoom: 10,
      //   center: this.location
      // })
      // // 绘制边界线
      // const drawBoundary = function(bounds) {
      //   for (let i = 0; i < bounds.length; i += 1) {
      //     new AMap.Polyline({
      //       path: bounds[i],
      //       strokeColor: '#0dcdd1',
      //       strokeWeight: 4,
      //       map: that.bmap
      //     })
      //   }
      // }
      // this.bmap.on('click',showInfoClick)
      // function showInfoClick(e) {
      //   var zoom = that.bmap.getZoom()
      //   if(zoom<15){
      //     that.bmap.setZoomAndCenter(15,e.lnglat)
      //   }else if(zoom >= 15){
      //     that.bmap.setZoomAndCenter(10,e.lnglat)
      //   }
      //   console.log('此坐标点了', this.location)
      //   console.log('====>',that.bmap.getZoom())
      // }
      // // 查询行政区边界
      // const searchDistrict = function(cityName) {
      //   let opts = {
      //     extensions: 'all',
      //     level: 'city'
      //   }
      //   const district = new AMap.DistrictSearch(opts)
      //   district.search(cityName, function(status, result) {
      //     console.log(status, result)
      //     let bounds = result.districtList[0].boundaries
      //     console.log(bounds.length)
      //     if (bounds) {
      //       drawBoundary(bounds)
      //     }
      //   })
      // }
      // let icons = new AMap.Icon({
      //   size: new AMap.Size(30, 30), // 图标尺寸
      //   image: icon, // 图标的URL地址
      //   imageSize: new AMap.Size(30, 30) // 图标显示尺寸
      // })
      // // 绘制点标记
      // const drawMarker = function([lng, lat], label) {
      //   new AMap.Marker({
      //     position: [lng, lat],
      //     map: that.bmap,
      //     icon: icons // 设置图标
      //   })
      // }
      // // 绘制两个点标记
      // drawMarker([114.02, 32.98], '地址1')
      // drawMarker([114.02, 32.98], '地址2')
      // // 查询驻马店市的行政区边界并绘制
      // searchDistrict('驻马店市')
    }
  }
}
</script>
<style lang="less" scoped>
/*隐藏高德地图logo，版本号*/
/deep/ .amap-logo {
  visibility: hidden;
}
/deep/ .amap-copyright {
  visibility: hidden;
}
/deep/ .amap-marker-label {
  color: #0a0e21;
}
.ant-carousel /deep/.slick-slide {
  text-align: center;
  height: 1380px;
  line-height: 160px;
  z-index: 1000;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel /deep/ .slick-slide h3 {
  color: #fff;
}
.main {
  width: 3840px;
  height: 1509px;
  background-color: #ccc;
  background-image: url('../../assets/dapingImg/banner 2560×1060 1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.titles {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  background-image: url('../../assets/dapingImg/10.png');
  background-size: 100% 5%;
  background-position: 0 33px;
  background-repeat: no-repeat;
  font-size: 17px;
  font-weight: 700;
  span {
    padding-left: 20px;
  }
  .ying {
    font-size: 12px;
    color: #4a4d5b;
  }
}
.content {
  height: 89%;
  color: #fff;
  .content_left {
    height: 1380px;
    background-color: #0a0e21;
    display: flex;
    justify-content: space-around;
    .left {
      width: 50%;
      padding: 20px;
      .GeneralView {
        width: 100%;

        padding-bottom: 20px;
        .GeneralView_main {
          margin-top: 20px;
          display: flex;
          justify-content: space-around;
          text-align: center;
          flex-wrap: wrap;
          .span1 {
            font-size: 48px;
            font-weight: 700;
            background-image: linear-gradient(rgba(46, 184, 255, 0.5), #89daff);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
          }
          .span2 {
            font-size: 20px;
            padding-left: 5px;
          }
          .GeneralView_main_left {
            height: 130px;
          }
          .GeneralView_main_top {
            width: 100%;
            height: 130px;
          }
          .GeneralView_main_right {
            height: 130px;
          }
        }
      }
      .Statistics {
        width: 100%;
        .Statistics_main {
          padding: 20px;
          width: 100%;
          .Statistics_box {
            margin: 20px 0;
            width: 100%;
            height: 80px;
            background-image: url('../../assets/dapingImg/28.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            padding: 0 50px;
            justify-content: space-between;
            .Statistics_box_span1 {
              font-size: 17px;
              img {
                padding-right: 8px;
              }
            }
            .Statistics_box_span2 {
              text-align: center;
              width: 100px;
              height: 100%;
              line-height: 80px;
              font-size: 35px;
              font-weight: 700;
              color: #d1e2fc;
              background-image: url('../../assets/dapingImg/23.png');
              background-size: 100% 30%;
              background-repeat: no-repeat;
              background-position: 0 55px;
            }
          }
        }
      }
      .team {
        width: 100%;
        .team_main {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-top: 30px;
          .team_main_box {
            display: flex;
            align-items: center;
            .team_main_box_right {
              text-align: center;
              padding-left: 10px;
              .shuliang {
                font-size: 27px;
                color: #89daff;
                font-weight: 700;
              }
              .name {
              }
            }
          }
        }
      }
      .merchant {
        height: 460px;
        overflow: hidden;
        margin-top: 20px;
        .merchant_list {
          width: 100%;
          padding: 20px;
          div {
            height: 50px;
            line-height: 50px;
            background-image: url('../../assets/dapingImg/10.png');
            background-size: 100% 5%;
            background-position: 0 47px;
            background-repeat: no-repeat;
          }
        }
      }
    }
    .right {
      width: 50%;
      .Weather {
        width: 100%;
        .Weather_top {
          height: 130px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .Weather_top_left {
            img {
              width: 160px;
              height: 120px;
            }
          }
          .Weather_top_center {
            font-size: 16px;
            img {
              padding-right: 10px;
            }
            div {
              font-size: 67px;
              span {
                position: relative;
                top: -35px;
                font-size: 14px;
              }
            }
          }
          .Weather_top_right {
          }
        }
        .Weather_bottom {
          width: 100%;
          .Weather_bottom_box {
            font-size: 16px;
            padding: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
          }
        }
      }
      .warning {
        width: 100%;
        margin-bottom: 20px;
        .warning_center {
          padding-top: 50px;
          width: 100%;
          text-align: center;
          position: relative;
          .warning_center_title {
            position: absolute;
            top: 36%;
            left: 39%;
            color: #89daff;
            .warning_center_title_box1 {
              font-size: 30px;
              font-weight: 700;
            }
          }
        }
        .warning_bottom {
          width: 100%;
          font-size: 18px;
          text-align: center;
          margin-top: 50px;
        }
      }
      .Risk {
        width: 100%;
        height: 375px;
        overflow: hidden;
        .Risk_center_title {
          padding: 20px 20px 10px 20px;
          width: 100%;
          color: #9bffff;
          span {
            display: inline-block;
            width: 50%;
          }
        }
        .Risk_center_box {
          padding: 10px 20px;
          width: 100%;
          span {
            display: inline-block;
            width: 50%;
          }
        }
      }
      .video {
        width: 100%;
        height: 430px;
        overflow: hidden;
        overflow-y: scroll;
        .video_list {
          width: 100%;
          div {
            padding: 0 20px 20px 20px;
          }
          img {
            width: 100%;
          }
        }
      }
      .video::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
  }
  .iamges {
    height: 1380px;
    z-index: 1000 !important;
  }
  .content_middle {
    position: relative;
    .amap-box {
      width: 100%;
      height: 1380px;
    }
    .pop_up {
      position: absolute;
      top: 20%;
      left: 36%;
      width: 500px;
      height: 300px;
      background-image: url('../../assets/dapingImg/16.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 30px;
      .pop_up_title {
        font-size: 20px;
        text-align: center;
        font-weight: 700;
        color: #89daff;
      }
      .pop_up_title_list {
        padding-top: 20px;
        padding-left: 20px;
        width: 100%;
        height: 30px;
        font-size: 16px;
      }
    }
  }
  .content_right {
    background-color: #0a0e21;
    display: flex;
    padding: 20px;
    height: 1380px;
    .left {
      width: 50%;
      .Shelter {
        width: 100%;
        padding-bottom: 20px;
        .Shelter_center {
          width: 100%;
          #main {
            width: 100%;
            height: 400px;
          }
        }
      }
      .preparedness {
        width: 100%;
        padding-bottom: 20px;
        .preparedness_center {
          width: 100%;
          #main2 {
            width: 100%;
            height: 400px;
          }
        }
      }
      .Event {
        width: 100%;
        height: 450px;
        overflow: hidden;
        overflow-y: scroll;
        .Event_center {
          width: 100%;
          .Event_center_title {
            padding-top: 20px;
            padding-bottom: 20px;
            display: flex;
            justify-content: space-around;
            div {
              width: 120px;
              text-align: center;
              height: 30px;
              line-height: 30px;
              background-image: url('../../assets/dapingImg/12.png');
              background-repeat: no-repeat;
            }
            .Select {
              background-image: url('../../assets/dapingImg/11.png');
            }
          }
          .Event_center_list {
            width: 100%;
            text-align: center;
            div {
              height: 50px;
              line-height: 50px;
              background-image: url('../../assets/dapingImg/10.png');
              background-size: 100% 5%;
              background-position: 0 47px;
              background-repeat: no-repeat;
            }
          }
        }
      }
      .Event::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
    .right {
      width: 50%;
      .Disaster {
        width: 100%;
        .Disaster_center {
          width: 100%;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          margin-top: 20px;
          .Disaster_center_box {
            width: 48%;
            height: 115px;
            padding-left: 40px;
            margin-bottom: 10px;
            line-height: 115px;
            background-image: url('../../assets/dapingImg/16.png');
            background-repeat: no-repeat;
          }
        }
      }
      .Stash {
        width: 100%;
        height: 450px;
        overflow: hidden;
        overflow-y: scroll;
        .Stash_center_list {
          width: 100%;
          text-align: center;
          div {
            height: 50px;
            line-height: 50px;
            background-image: url('../../assets/dapingImg/10.png');
            background-size: 100% 5%;
            background-position: 0 47px;
            background-repeat: no-repeat;
          }
        }
      }
      .Stash::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .Material {
        width: 100%;
        .Material_center {
          width: 100%;
          .Material_center_title {
            margin: 50px 0 20px 120px;
            width: 215px;
            height: 63px;
            font-size: 30px;
            font-weight: 700;
            background-image: url('../../assets/dapingImg/15.png');
            text-align: center;
            line-height: 63px;
            background-repeat: no-repeat;
            span {
              font-weight: 100;
              font-size: 15px;
            }
          }
          .Material_center_titles {
            text-align: center;
          }
          .Material_center_list {
            padding: 20px 20px 10px 20px;
            width: 100%;
            color: #9bffff;
            span {
              padding-left: 50px;
              display: inline-block;
              width: 50%;
            }
          }
          .Material_center_box {
            padding: 10px 20px;
            width: 100%;
            span {
              padding-left: 50px;
              display: inline-block;
              width: 50%;
            }
          }
        }
      }
    }
  }
}

.header {
  width: 100%;
  text-align: center;
  height: 160px;
  background-image: url('../../assets/dapingImg/3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  .tianqi {
    width: 380px;
    height: 40px;
    display: flex;
    align-items: center;
    position: absolute;
    left: 61px;
    top: 42%;
    color: #89daff;
    font-size: 30px;
    span {
      padding-left: 10px;
    }
  }
  .guang {
    width: 500px;
    height: 160px;
    background-image: url('../../assets/dapingImg/5.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 44%;
    top: 17%;
    img {
      width: 500px;
      height: 200px;
    }
  }
  .title {
    line-height: 100px;
    height: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 60px;
    font-family: PangMenZhengDao-Regular, PangMenZhengDao;
    text-shadow: 0px 5px 0px rgba(53, 119, 255, 0.52);
  }
  .title2 {
    line-height: 60px;
    height: 100%;
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    font-family: PangMenZhengDao-Regular, PangMenZhengDao;
    text-shadow: 0px 5px 0px rgba(53, 119, 255, 0.52);
  }
}
</style>
